import React, { useEffect } from 'react'
import styles from './index.module.less'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import { getOptions } from './options'
import type { SwiperItemProps } from '../../interface'
import { observer } from 'mobx-react'

export const StatisticsPage = observer((props: SwiperItemProps) => {
    const {
        current,
        itemIndex,
        store: { dataSource },
    } = props
    const { quarter_student_module } = dataSource || {}
    const isActive = current === itemIndex

    useEffect(() => {
        if (isActive && quarter_student_module) {
            const data: string[] = [] /** 季度 */
            const studentData: number[] = [] /**人员数量 */
            const studentQualityData: number[] = [] /**合格人员数量 */
            quarter_student_module.forEach(item => {
                data.push(item.quarter)
                studentData.push(item.student_num)
                studentQualityData.push(item.student_quality_num)
            })
            const goodsPoint = echarts.init(document.getElementById('preview') as HTMLElement)
            goodsPoint.setOption(getOptions(data, studentData, studentQualityData))
        }
    }, [isActive, quarter_student_module])

    return (
        <div className={styles.statistics}>
            <h2>这一年</h2>
            <h5>{dataSource.region}创业培训工作有序开展</h5>
            {/* <h3>{dataSource.busy_quarter}</h3> */}
            <div className={styles.statistics_view}>
                <div className={styles.statistics_view_item}>
                    <section>
                        <div />
                        <span>参训学员</span>
                    </section>
                    <section className={styles.qualified}>
                        <div />
                        <span>合格学员</span>
                    </section>
                </div>
                <div className={styles.statistics_view_preview} id={'preview'} />
            </div>
            <p>创业培训工作已成为{dataSource.region}</p>
            <p>人才培养工作的重要组成部分</p>
        </div>
    )
})

export default StatisticsPage
